import React from 'react';
import classes from "./Meal.module.css";
import Counter from '@/components/UI/Counter/Counter'

/**
 * 食物组件
 */
const Meal = (props) => {
  let { img, title, desc, price } = props.meal

  return (
    <div className={classes.Meal}>
      <div className={classes.ImgBox}>
        <img src={img}></img>
      </div>
      <div className={classes.DescBox}>
        <h2 className={classes.Title}>{title}</h2>
        {props.noDesc ? null : <p className={classes.Desc}>{props.meal.desc}</p>}
        <div className={classes.PriceWrap}>
          <span className={classes.Price}>{price}</span>
          <Counter meal={props.meal} />
        </div>
      </div>
    </div>
  );
};

export default Meal;